<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../vue@3.2.23.js"></script>
	</head>
	<body>
		<div id="app">
			<div class="count">{{count}}</div>
			<div class="text" v-text="message"></div>
			<div class="html" v-html="html"></div>
			<div class="html" v-bind:title="title">绑定属性测试</div>
			<input class="html" :disabled="isFalse">绑定属性测试简写
			<div class="html" v-on:click="myClickEven()">绑定监听事件测试</div>
			<div class="html" @click="myClickEven()">绑定监听事件测试简写</div>
			<input type="text" v-model="age" placeholder="请输入年龄" />
			<button @click="upDataAge()">年龄增加</button>
			<div class="name" v-if="num == 1">1</div>
			<div class="name" v-else-if="num == 2">2</div>
			<div class="name" v-else="num == 3">3</div>
			<!-- 	<div class="good_item" v-for="(val,index) in goods" :key="index" :index="index" @click="inerses(index)">
				<div class="title">{{val.title}}</div>
				<div class="price">{{val.price}}元</div>
				<div class="chooseNum">{{val.chooseNum}}</div>
			</div> -->
			<table border="1" style="text-align: center;">
				<tr>
					<td>商品名</td>
					<td>价格</td>
					<td>数量</td>
					<td>总价</td>
					<td>操作</td>
				</tr>
				<tr class="good_item" v-for="(val,index) in computedAllPrice" :key="index">
					<td>{{val.title}}</td>
					<td>{{val.price}}元</td>
					<td>{{val.chooseNum}}</td>
					<td>{{val.allPrice}}元</td>
					<td>
						<button @click="inerses(index)">增加</button>
						<button @click="dserse(index)">减少</button>
					</td>
				</tr>
				<tr>
					<td colspan="4">支付</td>
					<td>{{payPrices}}</td>
				</tr>
			</table>
		</div>
	</body>
</html>
<script>
	//解构
	const {
		createApp
	} = Vue;
	//创建实例
	const app = createApp({
		data() {
			return {
				//1插值语法{{}}
				count: 1,
				//2指令
				//v-text:文本渲染
				message: "a",
				//v-html:类似innerHTML
				html: "<strong>a</strong>",
				//v-bind:绑定属性，简写为:
				title: "我是一个提示",
				//v-on:绑定监听事件，简写为@
				//v-model:数据的双向绑定
				age: 23,
				//v-if v-if-else v-else
				num: 2,
				//v-for循环
				goods: [{
					title: "旺旺",
					price: 8,
					chooseNum: 0
				}, {
					title: "蜜雪冰城",
					price: 4,
					chooseNum: 0
				}],
				isFalse: false
			}
		},
		methods: {
			myClickEven() {
				alert("哈哈哈")
			},
			upDataAge() {
				this.age++
			},
			inerses(index) {
				this.goods[index].chooseNum++
			},
			dserse(index) {
				if (this.goods[index].chooseNum <= 0) {
					return;
				}
				this.goods[index].chooseNum--
			}
		},
		//计算属性
		computed: {
			computedAllPrice() {
				return this.goods.map(val => {
					const allPrice = val.chooseNum * val.price;
					return{
						...val,
						allPrice
					}
				})
			},
			payPrices(){
				let sumPrice = 0;
				this.computedAllPrice.forEach(val =>{
					sumPrice += val.allPrice
				})
				return sumPrice
			}

		},
		//侦听器
		watch: {
			age(newAge, oldAge) {
				console.log(newAge)
				console.log(oldAge)
			}
		},
		beforeCreate() {

		},
		created() {
			setInterval(() => {
				this.count++
			}, 1000)
		},
		beforeMount() {

		},
		mounted() {

		},
		beforeUpdate() {

		},
		updated() {

		},
		beforeUnmount() {

		},
		unmounted() {

		}
	})
	const vm = app.mount("#app")
</script>